<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ticket Sales Detail</title>
        <link rel="stylesheet" href="./css/airline.css">
        <link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.min.css">
        <script src="./js/jquery-3.4.1/jquery-3.4.1.min.js"></script>
        <script src="./js/sunshine.js"></script>
        <script src="./js/TicketSalesDetail.js"></script>
    </head>
    <body>
        <div class="top">
            <div class="logo">
                <img class="logoimg" src="./image/logo/logo1.png" alt="">
            </div>   
            <div class="status">
                Administrator Menu
            </div>
        </div>
        <div class="TSD">
            <div class="TSDhead">
                <div class="TSDtitle">Ticket Sales Detail</div>
                <div class="TSDback">
                    <a href="./FlightSchMgt.html">
                        <input style="width: 60px;height: 20px;" type="button"name="" id="" value="Exit" />
                    </a>
                </div>
            </div>
            <span class="info"></span>
            <div class="TSDimg">
                <img src="./image/Aircraft-Boeing 737-800.jpg" alt="">
            </div>
            <div class="TSDseat">
                <div class="TSDclass">
                    <div class="classtext">
                        <p style="color:#00A0BB;font-weight: bold;">First Class</p>
                        <p>2/8  25%</p>
                        <p>Total Tickets:8</p>
                        <p>Sold Tickets:2</p>
                        <p>Seats Selected:2</p> 
                    </div>
                    <div class="classtext">
                        <p style="color:#00A0BB;font-weight: bold;">Business Class</p>
                        <p>40/60  66.67%</p>
                        <p>Total Tickets:60</p>
                        <p>Sold Tickets:40</p>
                        <p>Seats Selected:5</p> 
                    </div>
                    <div class="classtext" style="margin: 0 0 0 100px;">
                        <p style="color:#00A0BB;font-weight: bold;">Economy Class</p>
                        <p>52/120  43.33%</p>
                        <p>Total Tickets:52</p>
                        <p>Sold Tickets:120</p>
                        <p>Seats Selected:9</p> 
                    </div>
                </div>
                <div class="seatclass">
                    <div class="firstclass">
                        <!-- <div class="seatstyle" style="margin-top: 20px;" data-name="1L">1L</div>
                        <div class="seatstyle"  style="margin-top: 20px;" data-name="2L">2L</div>
                        <div class="seatstyle" data-name="1J" style="margin-bottom: 30px;">1J</div>
                        <div class="seatstyle" data-name="2J" style="margin-bottom: 30px;background-color: orange;">2J</div>
                        <div class="seatstyle" data-name="1C" style="background-color: orange;">1C</div>
                        <div class="seatstyle" data-name="2C">2C</div>
                        <div class="seatstyle" data-name="1A">1A</div>
                        <div class="seatstyle" data-name="2A">2A</div> -->
                    </div>
                    <div class="businessclass">
                        <div class="busline">
                            <div class="busseat" data-name="3L">3L</div>
                            <div class="busseat" data-name="4L">4L</div>
                            <div class="busseat" data-name="5L">5L</div>
                            <div class="busseat" data-name="6L">6L</div>
                            <div class="busseat" data-name="7L">7L</div>
                            <div class="busseat" data-name="8L">8L</div>
                            <div class="busseat" data-name="9L">9L</div>
                            <div class="busseat" data-name="10L">10L</div>
                            <div class="busseat" data-name="11L">11L</div>
                            <div class="busseat" data-name="12L">12L</div>
                        </div>
                        <div class="busline">
                            <div class="busseat" data-name="3K">3K</div>
                            <div class="busseat" data-name="4K">4K</div>
                            <div class="busseat" data-name="5K" style="background-color: orange;">5K</div>
                            <div class="busseat" data-name="6K">6K</div>
                            <div class="busseat" data-name="7K">7K</div>
                            <div class="busseat" data-name="8K">8K</div>
                            <div class="busseat" data-name="9K">9K</div>
                            <div class="busseat" data-name="10K">10K</div>
                            <div class="busseat" data-name="11K">11K</div>
                            <div class="busseat" data-name="12K">12K</div>
                        </div>
                        <div class="busline">
                            <div class="busseat" data-name="3J" style="background-color: orange;">3J</div>
                            <div class="busseat" data-name="4J">4J</div>
                            <div class="busseat" data-name="5J">5J</div>
                            <div class="busseat" data-name="6J">6J</div>
                            <div class="busseat" data-name="7J">7J</div>
                            <div class="busseat" data-name="8J">8J</div>
                            <div class="busseat" data-name="9J">9J</div>
                            <div class="busseat" data-name="10J">10J</div>
                            <div class="busseat" data-name="11J">11J</div>
                            <div class="busseat" data-name="12J">12J</div>
                        </div>
                        <div class="busline" style="margin-top: 20px;">
                            <div class="busseat" data-name="3C">3C</div>
                            <div class="busseat" data-name="4C">4C</div>
                            <div class="busseat" data-name="5C">5C</div>
                            <div class="busseat" data-name="6C" style="background-color: orange;">6C</div>
                            <div class="busseat" data-name="7C">7C</div>
                            <div class="busseat" data-name="8C">8C</div>
                            <div class="busseat" data-name="9C">9C</div>
                            <div class="busseat" data-name="10C">10C</div>
                            <div class="busseat" data-name="11C">11C</div>
                            <div class="busseat" data-name="12C">12C</div>
                        </div>
                        <div class="busline">
                            <div class="busseat" data-name="3B">3B</div>
                            <div class="busseat" data-name="4B" style="background-color: orange;">4B </div>
                            <div class="busseat" data-name="5B">5B</div>
                            <div class="busseat" data-name="6B">6B</div>
                            <div class="busseat" data-name="7B">7B</div>
                            <div class="busseat" data-name="8B">8B</div>
                            <div class="busseat" data-name="9B">9B</div>
                            <div class="busseat" data-name="10B">10B</div>
                            <div class="busseat" data-name="11B">11B</div>
                            <div class="busseat" data-name="12B">12B</div>
                        </div>
                        <div class="busline">
                            <div class="busseat" data-name="3A">3A</div>
                            <div class="busseat" data-name="4A" style="background-color: orange;">4A</div>
                            <div class="busseat" data-name="5A">5A</div>
                            <div class="busseat" data-name="6A">6A</div>
                            <div class="busseat" data-name="7A">7A</div>
                            <div class="busseat" data-name="8A">8A</div>
                            <div class="busseat" data-name="9A">9A</div>
                            <div class="busseat" data-name="10A">10A</div>
                            <div class="busseat" data-name="11A">11A</div>
                            <div class="busseat" data-name="12A">12A</div>
                        </div>
                    </div>
                    <div class="economyclass">
                        <div class="ecoline">
                            <div class="busseat" data-name="">13L</div>
                            <div class="busseat" data-name="">14L</div>
                            <div class="busseat" data-name="" style="background-color: orange;">15L</div>
                            <div class="busseat" data-name="">16L</div>
                            <div class="busseat" data-name="">17L</div>
                            <div class="busseat" data-name="">18L</div>
                            <div class="busseat" data-name="" style="background-color: orange;">19L</div>
                            <div class="busseat" data-name="">20L</div>
                            <div class="busseat" data-name="">21L</div>
                            <div class="busseat" data-name="">22L</div>
                            <div class="busseat" data-name="">23L</div>
                            <div class="busseat" data-name="">24L</div>
                            <div class="busseat" data-name="">25L</div>
                            <div class="busseat" data-name="">26L</div>
                            <div class="busseat" data-name="">27L</div>
                            <div class="busseat" data-name="">28L</div>
                            <div class="busseat" data-name="">29L</div>
                            <div class="busseat" data-name="">30L</div>
                            <div class="busseat" data-name="">31L</div>
                            <div class="busseat" data-name="">32L</div>
                        </div>
                        <div class="ecoline">
                            <div class="busseat" data-name="">13K</div>
                            <div class="busseat" data-name="" style="background-color: orange;">14K</div>
                            <div class="busseat" data-name="" style="background-color: orange;">15K</div>
                            <div class="busseat" data-name="">16K</div>
                            <div class="busseat" data-name="">17K</div>
                            <div class="busseat" data-name="">18K</div>
                            <div class="busseat" data-name="">19K</div>
                            <div class="busseat" data-name="">20K</div>
                            <div class="busseat" data-name="">21K</div>
                            <div class="busseat" data-name="">22K</div>
                            <div class="busseat" data-name="">23K</div>
                            <div class="busseat" data-name="">24K</div>
                            <div class="busseat" data-name="">25K</div>
                            <div class="busseat" data-name="">26K</div>
                            <div class="busseat" data-name="">27K</div>
                            <div class="busseat" data-name="">28K</div>
                            <div class="busseat" data-name="">29K</div>
                            <div class="busseat" data-name="">30K</div>
                            <div class="busseat" data-name="">31K</div>
                            <div class="busseat" data-name="">32K</div>
                        </div>
                        <div class="ecoline">
                            <div class="busseat" data-name="">13J</div>
                            <div class="busseat" data-name="" style="background-color: orange;">14J</div>
                            <div class="busseat" data-name="">15J</div>
                            <div class="busseat" data-name="" style="background-color: orange;">16J</div>
                            <div class="busseat" data-name="">17J</div>
                            <div class="busseat" data-name="">18J</div>
                            <div class="busseat" data-name="">19J</div>
                            <div class="busseat" data-name="">20J</div>
                            <div class="busseat" data-name="">21J</div>
                            <div class="busseat" data-name="">22J</div>
                            <div class="busseat" data-name="">23J</div>
                            <div class="busseat" data-name="">24J</div>
                            <div class="busseat" data-name="">25J</div>
                            <div class="busseat" data-name="">26J</div>
                            <div class="busseat" data-name="">27J</div>
                            <div class="busseat" data-name="">28J</div>
                            <div class="busseat" data-name="">29J</div>
                            <div class="busseat" data-name="">30J</div>
                            <div class="busseat" data-name="">31J</div>
                            <div class="busseat" data-name="">32J</div>
                        </div>
                        <div class="ecoline" style="margin-top: 20px;" >
                            <div class="busseat" data-name="">13C</div>
                            <div class="busseat" data-name="">14C</div>
                            <div class="busseat" data-name="">15C</div>
                            <div class="busseat" data-name="">16C</div>
                            <div class="busseat" data-name="" style="background-color: orange;">17C</div>
                            <div class="busseat" data-name="">18C</div>
                            <div class="busseat" data-name="">19C</div>
                            <div class="busseat" data-name="">20C</div>
                            <div class="busseat" data-name="">21C</div>
                            <div class="busseat" data-name="">22C</div>
                            <div class="busseat" data-name="">23C</div>
                            <div class="busseat" data-name="">24C</div>
                            <div class="busseat" data-name="">25C</div>
                            <div class="busseat" data-name="">26C</div>
                            <div class="busseat" data-name="">27C</div>
                            <div class="busseat" data-name="">28C</div>
                            <div class="busseat" data-name="">29C</div>
                            <div class="busseat" data-name="">30C</div>
                            <div class="busseat" data-name="">31C</div>
                            <div class="busseat" data-name="">32C</div>
                        </div>
                        <div class="ecoline">
                            <div class="busseat" data-name="">13B</div>
                            <div class="busseat" data-name="">14B</div>
                            <div class="busseat" data-name="">15B</div>
                            <div class="busseat" data-name="">16B</div>
                            <div class="busseat" data-name="">17B</div>
                            <div class="busseat" data-name="">18B</div>
                            <div class="busseat" data-name="" style="background-color: orange;">19B</div>
                            <div class="busseat" data-name="">20B</div>
                            <div class="busseat" data-name="">21B</div>
                            <div class="busseat" data-name="">22B</div>
                            <div class="busseat" data-name="">23B</div>
                            <div class="busseat" data-name="">24B</div>
                            <div class="busseat" data-name="">25B</div>
                            <div class="busseat" data-name="">26B</div>
                            <div class="busseat" data-name="">27B</div>
                            <div class="busseat" data-name="">28B</div>
                            <div class="busseat" data-name="">29B</div>
                            <div class="busseat" data-name="">30B</div>
                            <div class="busseat" data-name="">31B</div>
                            <div class="busseat" data-name="">32B</div>
                        </div>
                        <div class="ecoline">
                            <div class="busseat" data-name="">13A</div>
                            <div class="busseat" data-name="">14A</div>
                            <div class="busseat" data-name="" style="background-color: orange;">15A</div>
                            <div class="busseat" data-name="">16A</div>
                            <div class="busseat" data-name="">17A</div>
                            <div class="busseat" data-name="">18A</div>
                            <div class="busseat" data-name="">19A</div>
                            <div class="busseat" data-name="">20A</div>
                            <div class="busseat" data-name="">21A</div>
                            <div class="busseat" data-name="">22A</div>
                            <div class="busseat" data-name="">23A</div>
                            <div class="busseat" data-name="">24A</div>
                            <div class="busseat" data-name="">25A</div>
                            <div class="busseat" data-name="">26A</div>
                            <div class="busseat" data-name="">27A</div>
                            <div class="busseat" data-name="">28A</div>
                            <div class="busseat" data-name="">29A</div>
                            <div class="busseat" data-name="">30A</div>
                            <div class="busseat" data-name="">31A</div>
                            <div class="busseat" data-name="">32A</div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
        
        
        
        
        
</html>